<template>
	<view class="bg">
		<ttBar leftIcon="icon-back" title="报名详情" titleAlign="left">
			<template v-slot:rightCnt>
				<button class="share" open-type="share" v-if="orderData.status == 2 || orderData.status == 3 ">
					<text class="iconfont icon-share rIcon"></text>
				</button>
			</template>
		</ttBar>
		<view class="statusBox" v-if="orderData.status == 6"><text>该订单已超时关闭</text></view>

		<view class="statusBox" v-if="orderData.status == 1">
			<text class="iconfont icon-daojishi"></text>
			<text>{{djsText}}</text>
		</view>

		<view class="dtList">
			<view class="dtItem orderItem">
				<view class="shopBox">
					<text class="iconfont icon-shoucangdianjia" @tap="toShop"></text>
					<text class="shopName" @tap="toShop">{{ orderData.storeName }}</text>
				</view>
				<view class="goodBox">
					<image class="goodImg" :src="orderData.img" @tap="toGood"></image>
					<view class="infoBox">
						<text class="goodName" @tap="toGood">{{ orderData.name }}</text>
						<!-- <view class="fuwuBox">
							<button class="orderOp" v-if="(orderData.status == 2 )" v-for="(item, index) in goodInfo.protectList" :key="index">{{ item.name }}</button>
						</view> -->

						<text class="price">￥{{ orderData.paymentPrice }}</text>
					</view>
				</view>

				<block v-if="orderData.status == 1">
					<view class="priceBox">
						<text>{{ daifu[orderData.status] }}:</text>
						<text class="payAmount">￥{{ orderData.payAmount }}</text>
					</view>
				</block>
				<block v-if="orderData.status == 2 || orderData.status == 3">
					<view class="priceBox">
						<text>已支付:</text>						
						<block >
							<text class="payAmount">￥{{orderData.payAmount}}</text>
						</block>
						<text class="payStatus">已付</text>
					</view>
				</block>
				<block v-if="orderData.status == 5">
					<view class="priceBox">
						<text>已支付:</text>						
						<block >
							<text class="payAmount">￥{{orderData.payAmount}}</text>
						</block>
						<text class="payStatus">已退款</text>
					</view>
				</block>
	

				<view class="opBox">
				
					<!-- <button>交易快照</button> -->
					<button  v-if="(orderData.status == 2 ) && orderData.refundType==1" @tap="toRefound">申请退款</button>
					
					<button v-if="orderData.status == 1" @tap="toPay">付全款</button>

					<!-- <button v-if="(orderData.status == 4 || orderData.status == 5) && orderData.refundType==1" @tap="toPage" >
						退款详情
					</button> -->
				</view>
			</view>
			<view class="dtItem lxrBox">
				<image src="../static/renyuan.png"></image>
				<text>{{ orderData.memberName}}</text>
				<text>联系电话:{{orderData.phone }}</text>
			</view>
			<view class="dtItem" v-if="orderData.status==2">				
				<xiaofei-code :orderData='orderData'></xiaofei-code>
			</view>
			<!-- 核销历史的入口 -->
		<!-- 	<view class="dtItem hexiao" v-if="orderData.status==9">
				<text class="lishi">核销历史</text>
				<text class="iconfont icon-right" @tap="toPage" data-url="hexiaoList" :data-oid="orderData.orderNo"></text>
			</view> -->
			<view class="dtItem shop">
				<text class="boxTitle">联系信息</text>
				<view class="shopBox shopCard">
					<image class="brandImg" :src="orderData.logo ? orderData.logo : '../static/loding.png'" @tap="toShop"></image>
					<view class="cardInfo" data-url="shopDetail" @tap="toShop">
						<text class="shopName">{{ orderData.storeName }}</text>
						<text class="shopAddress">{{ orderData.address }}</text>
					</view>
					<view class="shopBtn">
						<image src="../static/msg.png" @tap="toTIM"></image>
						<image src="../static/dianhua.png" @tap="call"></image>
					</view>
				</view>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">订单信息</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">活动价格：</text>
						<text class="val">￥{{ orderData.paymentPrice }}</text>
					</view>
					<view class="row">
						<text class="label">订单总计：</text>
						<text class="val">￥{{ orderData.paymentPrice}}</text>
					</view>
					<!-- <block v-for="(item, index) in orderData.coupons" :key="item.index" v-if="orderData.coupons.length > 0">
						<view class="row">
							<text class="label">{{ typeArr[item.coupon.source] }}：</text>
							<text class="val">￥{{ item.coupon.discount }}</text>
						</view>
					</block> -->
					<view class="row">
						<text class="label">订单编号：</text>
						<text class="val">{{ orderData.orderNo }}</text>
					</view>
					<view class="row">
						<text class="label">创建时间：</text>
						<text class="val">{{ orderData.createTime }}</text>
					</view>
				</view>
			</view>
			<view class="dtItem shop">
				<text class="boxTitle">平台客服</text>
				<view class="rowBox">
					<view class="row">
						<text class="label">客服电话：</text>
						<text class="val">025-84583336</text>
					</view>
					<view class="row">
						<text class="label">工作时间：</text>
						<text class="val">每天9:00 - 22:00</text>
					</view>
				</view>
			</view>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
import COMM from '@/common/common.js';
import ttBar from '@/components/ttBar/ttBar.vue';

import xiaofeiCode from '../components/experienceCode/xiaofeiCode.vue';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	components: {
		ttBar,
		xiaofeiCode
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin
		})
	},
	data() {
		return {
			orderData: {
				status: 0,
				store: {
					name: '店铺名'
				}
			},
			isTimeOut: false,
			// goodInfo: {
			// 	protectList: [
			// 		{
			// 			id: 1,
			// 			name: '随时退',
			// 			percent: 1
			// 		}
			// 	]
			// },
			id: 0,
			daifu: ['', '待付全款', '待付全款', '待付全款'],
			djsText: '',
			showtixian:true
		};
	},
	methods: {	
		getData() {
			this.$store
				.dispatch('apiGetOrderDtcg', {
					usualOrderNo: this.id
				})
				.then(res => {
					console.log(res)					
					this.orderData = res.data.data[0];					
					this.daojishi();				
				});
		},
		toPay() {
		
			this.toPage({
				url: 'pay',
				cid: this.orderData.orderNo
			});
		},
		
		toShop() {
			this.toPage({
				url: 'shopDetail',
				id: this.orderData.storeId
			});
		},
		toGood() {
			
			this.toPage({
				url:'cgxiangqing',
				id:this.orderData.actUsualId,
				storeId:this.orderData.storeId
			});
		},
		// 获取倒计时
		daojishi() {
			
			let time = new Date(Date.parse(this.orderData.payEndtime.replace(/-/g, "/")));
			let _now= new Date();
			let leftTime = time.getTime() - _now.getTime();
			if (leftTime>0) {								
				let _hour=Math.floor(leftTime/(1000*60*60)%24);
				let _min= Math.floor(leftTime/(1000*60)%60);
				_hour=_hour>9?_hour:'0'+_hour;
				_min=_min>9?_min:'0'+_min;
				this.djsText = _hour + '小时' + _min + '分钟后自动关闭';
			} else {
				this.djsText = '00小时00分钟后自动关闭'
			}
		},
		toRfdDt() {
			this.toPage({
				url: 'refoundDt',
				oid: this.orderData.order_id
			});
		},
		toTIM() {
			let _this = this;
			if (this.isLogin) {
				uni.showLoading({
					title: '',
					mask: false
				});
				this.$store.dispatch('apiPostTongji', {
					storeId: this.orderData.storeId,
					type: 2,
					userId: this.userInfo.userId
				});
				let toImid = _this.orderData.imid;
				if (getApp().globalData.TIM_SDK_READY) {
					uni.hideLoading();
					_this.toPage({
						url: 'conversationDt',
						cvid: 'C2C' + toImid,
						toImId: toImid,
						sname: _this.orderData.storeName,
						slogo: _this.orderData.logo,
						sid: _this.orderData.storeId
					});
				} else {
					_this.$store.dispatch('timLogin', _this.orderData.imid).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							_this.toPage({
								url: 'conversationDt',
								cvid: 'C2C' + toImid,
								toImId: toImid,
								sname:  _this.orderData.storeName,
								slogo: _this.orderData.logo,
								sid: _this.orderData.storeId
							});
						}, 1000);
					});
				}
			} else {
				this.toPage('login');
			}
		},
		call() {
			COMM.callPhone(this.orderData.phone);
		},
		toRefound() { 
			if(this.showtixian){
				this.showtixian =false;
				this.$store.dispatch("apirefundUsual",{
					usualOrderNo:this.orderData.orderNo		
				})//处理退款
				.then(res=>{
					console.log(res)
					var that = this						
					uni.showToast({
						title: res.data.date,
						icon: 'success',
						duration: 800,
						success: function() {
							setTimeout(function() {
								that.showtixian = true;
								that.getData();
							}, 800);
						}
					});
					
				})	
			}
								
		}				
	
	},
	onLoad(cfm) {
		this.id = cfm.id;
		this.getData();
		
	},
	onShareAppMessage(res) {
		let _href = '';
		if (this.isLogin) {
			_href='pages/index/index?url=cgxiangqing&id=' +this.orderData.actUsualId + '&storeId='+ this.orderData.storeId+ '&uid=' + this.userInfo.userId;
		} else {
			_href='pages/index/index?url=cgxiangqing&id=' +this.orderData.actUsualId + '&storeId='+ this.orderData.storeId
		}
		return {
			title: '发现一个不错的活动！' + this.orderData.name,
			path: _href,
			imageUrl: this.orderData.img
		};
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.share {
	background-color: rgba(0, 0, 0, 0);
	line-height:90rpx ;
	// background-color: #0077AA;
	vertical-align:middle;
}
.rIcon {
	display: block;
	font-size: 40upx;
	font-weight: normal;
	width: 70upx;
	height: 70upx;
	margin-right: -10upx;
	text-align: center;
	line-height: 70upx;
	border-radius: 50%;
}
.bg {
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
}

.statusBox {
	height: 100upx;
	padding: 0 50upx;
	line-height: 100upx;
	color: #ffffff;
	background-color: #ffb81d;

	text {
		font-size: 28upx;
	}

	.iconfont {
		font-size: 36upx;
		margin-right: 20upx;
	}
}

.dtList {
	display: flex;
	flex-direction: column;
	padding: 18upx;
}

.dtItem {
	background-color: #ffffff;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	border-radius: 10upx;
	margin-bottom: 18upx;
}

.orderItem {
	display: flex;
	flex-direction: column;
	padding: 36upx 20upx 36upx 36upx;

	.shopBox {
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 36upx;
		}

		.icon-shoucangdianjia {
			color: #202932;
			margin-right: 6upx;
		}

		.icon-right {
			color: #c9c9c9;
		}

		.orderStatus {
			color: #ffb423;
			font-size: 32upx;
			margin-top: -4upx;
			flex-grow: 1;
			text-align: right;
		}

		.shopName {
			font-size: 32upx;
			color: #202932;
			margin-top: -4upx;
		}
	}

	.goodBox {
		display: flex;
		margin-top: 32upx;
		padding-bottom: 20upx;
		border-bottom: 1px solid #eeeeee;
		margin-bottom: 10upx;

		.goodImg {
			width: 180upx;
			height: 100upx;
			border-radius: 8upx;
			margin-right: 20upx;
			flex-shrink: 0;
		}

		.infoBox {
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
		}

		.fuwuBox {
			display: flex;
			flex-wrap: wrap;
		}

		.goodName {
			font-size: 28upx;
			color: #202932;
		}

		.priceBox {
			display: flex;
			color: #202932;
			font-size: 28upx;
			align-items: baseline;
		}

		.orderOp {
			height: 34upx;
			line-height: 30upx;
			font-size: 24upx;
			color: #ffa023;
			border-radius: 16upx;
			padding: 0 20upx;
			border: 1px solid #ffa023;
			background-color: rgba(0, 0, 0, 0);
			margin: 0;
			margin-right: 10upx;
			margin-bottom: 10upx;
		}

		.orderOp:after {
			outline: none;
			border: none;
		}

		.price {
			color: #202932;
			font-weight: bold;
			font-size: 28upx;
		}
	}

	.priceBox {
		display: flex;
		align-items: center;
		font-size: 32upx;
		padding: 10upx 0;

		.payStatus {
			height: 30upx;
			line-height: 30upx;
			padding: 0 10upx;
			color: #ffffff;
			font-size: 20upx;
			background-color: #ffb852;
			border-radius: 3rpx;
			margin-left: 10upx;
		}

		.payAmount {
			color: #ff2020;
			font-weight: bold;
		}
	}

	.opBox {
		display: flex;
		padding-top: 20upx;
		justify-content: flex-end;

		button {
			height: 50upx;
			line-height: 48upx;
			font-size: 28upx;
			color: #ffa023;
			border-radius: 25upx;
			padding: 0 40upx;
			border: 1px solid #ffa023;
			background-color: rgba(0,0,0,0);
			margin: 0;
			align-self: flex-end;
			margin-left:30upx;
		}
		

		button:after {
			border: none;
		}
	}
}

.boxTitle {
	padding: 18upx 20upx 18upx 36upx;
	color: #202932;
}

.lxrBox {
	display: flex;
	align-items: center;
	font-size: 32upx;
	padding: 36upx 20upx 36upx 36upx;

	image {
		width: 46upx;
		height: 46upx;
		margin-right: 20upx;
	}

	text {
		margin-right: 20upx;
	}
}

.shop {
	display: flex;
	flex-direction: column;
}

.shopCard {
	background-color: #ffffff;
	padding: 30upx 36upx;
	border-bottom: 13upx solid #f4f4f4;
	display: flex;
	align-items: center;

	.brandImg {
		width: 100upx;
		height: 100upx;
		margin-right: 30upx;
	}

	.cardInfo {
		flex: 1;
		display: flex;
		flex-direction: column;

		.shopName {
			font-size: 26rpx;
			color: #202932;
		}

		.shopAddress {
			margin-top: 14upx;
			font-size: 24rpx;
			color: #838890;
		}
	}

	.shopBtn {
		flex-shrink: 0;
		display: flex;

		image {
			width: 40upx;
			height: 40upx;
			margin-left: 36upx;
		}
	}
}

.rowBox {
	display: flex;
	flex-direction: column;
	padding: 18upx 20upx 18upx 36upx;

	.row {
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #666666;
		margin-bottom: 10upx;
	}
}
.hexiao {
	height: 100rpx;
	line-height: 100rpx;
	padding: 0 36rpx;
	.icon-right {
		float: right;
	}
}
</style>
